<!--  -->
<template>
  <div class="head-col">
    <div class="pointer-events-auto absolute left-4 flex z-50 top-2">
      <img
        title="打开/关闭 数字人主持（自动识别版）"
        src="@/assets/AIicon.png"
        alt=""
        srcset=""
        @click="changeDUIX(true)"
        class="w-[36px] h-[30px] cursor-pointer"
      />
      <img
        title="打开/关闭 数字人主持（提问版）"
        src="@/assets/AIicon.png"
        alt=""
        srcset=""
        @click="changeDUIX(false)"
        class="w-[36px] h-[30px] cursor-pointer hue-rotate-30"
      />
    </div>
    <div class="bg"></div>
    <div class="flex justify-center relative z-10">
      <!-- <div class="flex justify-between col-span-4 text-2xl pt-10 pl-10">
        <div>{{ temp }}</div>
        <div>{{ weather }}</div>
        <div>
          <span class="text-lg">风力等级：</span><span class="text-[#21caa0]">{{ wind }}</span>
        </div>
      </div> -->
      <div class="col-span-4 text-center text-[36px] title">苏州市吴江区数据局</div>
      <!-- <div class="flex justify-between col-span-4 text-2xl pt-10 pr-10 pl-16">
        <span>{{ dayTime }}</span>
        <span>{{ dayWeek }}</span>
        <span>{{ dayYear }}</span>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import weatherAPI from '@/api/weather'
import { useCounterStore } from '@/stores/counter'
import moment from 'moment'
import { onMounted, ref } from 'vue'

const store = useCounterStore()
const weekTime = ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
const weather = ref('')
const temp = ref('')
const wind = ref('')
const dayTime = ref(moment().format('HH:mm:ss'))
const dayWeek = ref(weekTime[parseInt(moment().format('E'))])
const dayYear = ref(moment().format('YYYY/MM/DD'))

let timeInter: number | null = null
onMounted(() => {
  if (timeInter) {
    clearInterval(timeInter)
  }
  timeInter = setInterval(() => {
    const tm = moment()
    dayTime.value = tm.format('HH:MM:ss')
    dayWeek.value = weekTime[parseInt(moment().format('E'))]
    dayYear.value = tm.format('YYYY/MM/DD')
  }, 1000)
  weatherAPI.getWeather().then((res) => {
    const todayWeather = res.daily[0]
    weather.value = todayWeather.textDay
    temp.value = todayWeather.tempMin + '~' + todayWeather.tempMax + '℃'
    wind.value = todayWeather.windDirDay + ' ' + todayWeather.windScaleDay + '级'
  })
})

const changeDUIX = (openAsr: boolean) => {
  store.showDUIX = !store.showDUIX
  store.openAsrDUIX = openAsr
  if (store.showDUIX == false) {
    store.openAsrDUIX = true
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.head-col {
  position: relative;

  .bg {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    height: 108px;
    content: '';
    background: url(@/assets/bg_header.png);
    background-size: 100% 100%;
  }

  .title {
    font-family: 'AlibabaPuHuiTi-3-75-SemiBold';
    background: linear-gradient(0deg, #daddff, #ffffff, #8babff);
    background-clip: text;
    color: transparent;
  }
}
</style>
